<template>
  <div class="main">
    <p class="main_text">汽修厂审核</p>
    <!-- #################################### 表单 #################################### -->
    <div class="cyr-flex">
      <el-table :data="tableData"  :header-cell-style="{ background: '#f0f6fe' }"
        v-adaptive :show-overflow-tooltip="true" border>
        <el-table-column label="编号" prop="id" />
        <el-table-column label="法人姓名" prop="legalPersonName">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="readBtn(props.row.userId)">{{
              props.row.legalPersonName
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="mobile" />
        <el-table-column label="汽修厂名称" prop="name" />
        <el-table-column label="提交时间" prop="submissionTime" />
        <el-table-column label="状态">
          <template #default="props">
            <el-tag type="primary" v-if="props.row.auditStatus == 0">审核中</el-tag>
            <el-tag type="danger" v-else-if="props.row.auditStatus == 1">未通过</el-tag>
            <el-tag type="success" v-else>已通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120" :show-overflow-tooltip="false">
          <template #default="props">
            <el-button size="small" v-if="props.row.auditStatus == 2" link type="primary"
              @click="readBtn(props.row.userId)">查看</el-button>
            <el-button size="small" v-else link type="primary" @click="checkBtn(props.row.userId)">审核</el-button>
            <el-button size="small" link type="primary" @click="auditBtn(props.row.id)">审核记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- #################################### 分页 #################################### -->
      <!-- 分页器 -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
    <!-- ****************************** 审核 ****************************** -->
    <el-dialog v-model="checkCenterDialogVisible" width="40%" align-center @close="closeCheckCenterDialogVisible">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">审核</p>
        </div>
      </template>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">提交时间</div>
          </template>
          {{ checkFormData.submissionTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">汽修厂名称</div>
          </template>
          {{ checkFormData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">法人姓名</div>
          </template>
          {{ checkFormData.legalPersonName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">联系方式</div>
          </template>
          {{ checkFormData.mobile }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">银行名</div>
          </template>
          {{ checkFormData.openingBank }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">银行卡号</div>
          </template>
          {{ checkFormData.card }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">营业执照</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" :src="businessLImg" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /> -->
          <img class="imageCss" :src="businessLImg" alt="" @click="previewCarImg(businessLImg)" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">法人身份证</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" :src="legalPersonImg" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /> -->
          <img class="imageCss" :src="legalPersonImg" alt="" @click="previewCarImg(legalPersonImg)" />
        </el-descriptions-item>
        <el-descriptions-item v-if="certificateImg.length != 0">
          <template #label>
            <div class="cell-item">资质证书</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" v-for="(item, index) in certificateImg" :key="index" :src="item"
            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" :initial-index="4"
            fit="cover" /> -->
          <img class="imageCss" v-for="(item, index) in certificateImg" :key="index" :src="item" alt=""
            @click="previewCarImg(item)" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectCenterDialogVisible = true">拒绝</el-button>
          <el-button type="primary" @click="passAudit" :loading="loading">通过</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 查看 ****************************** -->
    <el-dialog v-model="readCenterDialogVisible" width="40%" align-center @close="closeCheckCenterDialogVisible">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">查看</p>
        </div>
      </template>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">提交时间</div>
          </template>
          {{ checkFormData.submissionTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">汽修厂名称</div>
          </template>
          {{ checkFormData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">法人姓名</div>
          </template>
          {{ checkFormData.legalPersonName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">联系方式</div>
          </template>
          {{ checkFormData.mobile }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">银行名</div>
          </template>
          {{ checkFormData.openingBank }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">银行卡号</div>
          </template>
          {{ checkFormData.card }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">营业执照</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" :src="businessLImg" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /> -->
          <img class="imageCss" :src="businessLImg" alt="" @click="previewCarImg(businessLImg)" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">法人身份证</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" :src="legalPersonImg" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /> -->
          <img class="imageCss" :src="legalPersonImg" alt="" @click="previewCarImg(legalPersonImg)" />
        </el-descriptions-item>
        <el-descriptions-item v-if="certificateImg.length != 0">
          <template #label>
            <div class="cell-item">资质证书</div>
          </template>
          <!-- <el-image style="width: 100px; height: 100px" v-for="(item, index) in certificateImg" :key="index" :src="item"
            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" :initial-index="4"
            fit="cover" /> -->
          <img class="imageCss" v-for="(item, index) in certificateImg" :key="index" :src="item" alt=""
            @click="previewCarImg(item)" />
          <img src="" alt="" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="readCenterDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="rejectCenterDialogVisible" align-center width="30%">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">审核未通过</p>
        </div>
      </template>
      <el-form :model="rejectFormData" ref="rejectFormDataRef" :rules="rejectFormDataRules" bel-width="90px"
        label-position="top" class="df fdc jcc aic">
        <el-form-item label="未通过原因：" style="width: 80%" prop="rejectReason">
          <el-input v-model="rejectFormData.rejectReason" placeholder="请填写未通过原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectCenterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="rejectBtn(rejectFormDataRef)" :loading="loading">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="AuditRecordDialogVisible" align-center width="40%">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">审核历史记录</p>
        </div>
      </template>
      <el-table :data="auditRecordtableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
        max-height="450">
        <el-table-column label="审核编号" prop="id" />
        <el-table-column label="审核人" prop="name" />
        <el-table-column label="审核时间" prop="create_at" />
        <el-table-column label="审核类型">
          <template #default="props">
            <el-tag type="danger" v-if="props.row.audit_result == 1">未通过</el-tag>
            <el-tag type="primary" v-else-if="props.row.audit_result == 0">通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" prop="reject_reason" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="AuditRecordDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleImg" align-center width="70%">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">图片</p>
        </div>
      </template>
      <div style="max-height: 70vh; width: 100%; background-color: #fff; overflow-y: scroll">
        <img style="width: 100%" :src="ImgdialogImageUrl" alt="" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleImg = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { formatTimeAll } from '../../../filters/index';
import { Edit } from '@element-plus/icons-vue';
import {
  RequestMaintenanceShopGetlistlimit,
  RequestMaintenanceShopFindById,
  RequestMaintenanceShopFactoryAuditReject,
  RequestMaintenanceShopFactoryAudit,
  RequestMaintenanceShopGetAuditLog,
} from '@/api/path/index.js';
const checkCenterDialogVisible = ref<any>(false);
const readCenterDialogVisible = ref<any>(false);
const AuditRecordDialogVisible = ref<any>(false);
const rejectCenterDialogVisible = ref<any>(false);
const dialogVisibleImg = ref<any>(false);
const tableData = ref<any>([]);
const loading = ref<any>(false);
const searchData = ref<any>({
  name: '',
  companyName: '',
});
const searchBtn = () => {
  currentPage.value = 1;
  getData();
};
const resetBtn = () => {
  currentPage.value = 1;
  searchData.value.name = null;
  searchData.value.companyName = null;
  getData();
};
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = async () => {
  RequestMaintenanceShopGetlistlimit({
    rows: pageSize.value,
    page: currentPage.value,
  }).then((res: any) => {
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
getData();
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  getData();
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  getData();
};
const businessLImg = ref<any>(''); //营业执照
const certificateImg = ref<any>([]); //资质证书
const legalPersonImg = ref<any>(''); //法人身份证
/* ************************ 查看 ************************ */
const checkFormData = ref<any>({});
const srcList = ref<any>([]);
const readBtn = (e: any) => {
  RequestMaintenanceShopFindById(e).then((res: any) => {
    if (res.success == true) {
      readCenterDialogVisible.value = true;
      res.resultObj.imgs.forEach((item: any) => {
        if (item.imgType == 0) {
          businessLImg.value = item.url;
        } else if (item.imgType == 1) {
          certificateImg.value.push(item.url);
        } else if (item.imgType == 2) {
          legalPersonImg.value = item.url;
        }
        // if(item.)
        srcList.value.push(item.url);
      });
      console.log(res.resultObj);
      checkFormData.value = res.resultObj;
    }
  });
};
const checkBtn = (e: any) => {
  RequestMaintenanceShopFindById(e).then((res: any) => {
    if (res.success == true) {
      checkCenterDialogVisible.value = true;
      res.resultObj.imgs.forEach((item: any) => {
        if (item.imgType == 0) {
          businessLImg.value = item.url;
        } else if (item.imgType == 1) {
          certificateImg.value.push(item.url);
        } else if (item.imgType == 2) {
          legalPersonImg.value = item.url;
        }
        // if(item.)
        srcList.value.push(item.url);
      });
      checkFormData.value = res.resultObj;
    }
  });
};
/* ************************ 预览图片 ************************ */
const ImgdialogImageUrl = ref<any>('');
const previewCarImg = (e: any) => {
  dialogVisibleImg.value = true;
  ImgdialogImageUrl.value = e;
};
/* ************************ 审核通过 ************************ */
// checkFormData
const adminId = JSON.parse(localStorage.getItem('roleInfo')!).id;
const passAudit = () => {
  RequestMaintenanceShopFactoryAudit(checkFormData.value.id, adminId, 2).then((res: any) => {
    loading.value = true;
    if (res.success == true) {
      ElMessage.success(res.msg);
      getData();
      checkCenterDialogVisible.value = false;
      loading.value = false;
    } else {
      ElMessage.error(res.msg);
      loading.value = false;
    }
  });
};
/* ************************ 审核未通过 ************************ */
const rejectFormDataRef = ref<any>();
const rejectFormDataRules = ref<any>({
  rejectReason: [{ required: true, message: '请填写未通过原因', trigger: 'blur' }],
});
const rejectFormData = ref<any>({
  rejectReason: '',
});
const rejectBtn = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      RequestMaintenanceShopFactoryAuditReject(
        checkFormData.value.id,
        adminId,
        1,
        rejectFormData.value.rejectReason,
      ).then((res: any) => {
        loading.value = true;
        if (res.success == true) {
          ElMessage.success(res.msg);
          getData();
          rejectCenterDialogVisible.value = false;
          loading.value = false;
        } else {
          ElMessage.error(res.msg);
          loading.value = false;
        }
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};
const closeCheckCenterDialogVisible = () => {
  certificateImg.value = [];
};
const auditRecordtableData = ref<any>([]);
const auditBtn = (e: any) => {
  RequestMaintenanceShopGetAuditLog(e).then((res: any) => {
    if (res.success == true) {
      AuditRecordDialogVisible.value = true;
      console.log(res.resultObj);
      res.resultObj.forEach((item: any) => {
        item.create_at = formatTimeAll(item.create_at);
      });
      auditRecordtableData.value = res.resultObj;
    }
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-icon svg {
    color: #fff;
  }
}

.imageCss {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}
</style>
